<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="70%"
    >
      <avue-form
        ref="formref"
        :key="formkey"
        :option="option"
        v-model="form"
        @submit="handleSubmit"
        @error="handleSubmitError"
      ></avue-form>

      <span
        class="avue-dialog__footer avue-dialog__footer--right"
        v-if="['add', 'edit'].includes(ntype)"
      >
        <el-button
          icon="el-icon-circle-plus-outline"
          type="primary"
          :loading="btnLoading"
          @click="submitBtnSave"
          >保存</el-button
        >
        <el-button icon="el-icon-circle-close" @click="dialogVisible = false"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { update, add, getNotice } from "@";

export default {
  data() {
    return {
      title: "",
      dialogVisible: false,
      ntype: "",
      formkey: 1,
      obj_detail: {},

      btnLoading: false,

      form: {},
      option: {
        column: [
          {
            type: "input",
            label: "单行文本",
            span: 24,
            display: true,
            prop: "1638787630128_76183",
            required: true,
            rules: [
              {
                required: true,
                message: "单行文本必须填写",
              },
            ],
          },
          {
            type: "textarea",
            label: "多行文本",
            span: 24,
            display: true,
            prop: "1638787630583_18087",
            maxlength: 200,
            showWordLimit: true,
          },
          {
            type: "number",
            label: "计数器",
            controls: true,
            span: 24,
            display: true,
            prop: "1638787631065_37186",
          },
          {
            type: "array",
            label: "数组",
            span: 24,
            display: true,
            prop: "1638787643079_3687",
          },
          {
            type: "radio",
            label: "单选框组",
            dicData: [
              {
                label: "选项一",
                value: "0",
              },
              {
                label: "选项二",
                value: "1",
              },
              {
                label: "选项三",
                value: "2",
              },
            ],
            span: 24,
            display: true,
            props: {
              label: "label",
              value: "value",
            },
            prop: "1638787643755_67660",
          },
          {
            type: "checkbox",
            label: "多选框组",
            dicData: [
              {
                label: "选项一",
                value: "0",
              },
              {
                label: "选项二",
                value: "1",
              },
              {
                label: "选项三",
                value: "2",
              },
            ],
            span: 24,
            display: true,
            props: {
              label: "label",
              value: "value",
            },
            prop: "1638787644127_20500",
          },
          {
            type: "select",
            label: "下拉选择器",
            dicData: [
              {
                label: "选项一",
                value: "0",
              },
              {
                label: "选项二",
                value: "1",
              },
              {
                label: "选项三",
                value: "2",
              },
            ],
            cascaderItem: [],
            span: 24,
            display: true,
            props: {
              label: "label",
              value: "value",
            },
            prop: "1638787644751_68920",
          },
          {
            type: "cascader",
            label: "级联选择器",
            span: 24,
            display: true,
            dicData: [
              {
                label: "选项一",
                value: 0,
                children: [
                  {
                    label: "选项1-1",
                    value: 11,
                  },
                  {
                    label: "选项1-2",
                    value: 12,
                  },
                ],
              },
              {
                label: "选项二",
                value: "1",
              },
              {
                label: "选项三",
                value: "2",
              },
            ],
            cascaderIndex: 1,
            cascaderItem: [],
            showAllLevels: true,
            separator: "/",
            props: {
              label: "label",
              value: "value",
            },
            prop: "1638787645502_99250",
          },
          {
            type: "tree",
            label: "树形选择器",
            span: 24,
            display: true,
            dicData: [
              {
                label: "选项一",
                value: 0,
                children: [
                  {
                    label: "选项1-1",
                    value: "11",
                  },
                  {
                    label: "选项1-2",
                    value: "12",
                  },
                ],
              },
              {
                label: "选项二",
                value: "1",
              },
              {
                label: "选项三",
                value: "2",
              },
            ],
            parent: true,
            cascaderItem: [],
            props: {
              label: "label",
              value: "value",
            },
            prop: "1638787645959_55379",
          },
          {
            type: "year",
            label: "年",
            span: 24,
            display: true,
            format: "yyyy",
            valueFormat: "yyyy",
            prop: "1638787656311_29227",
          },
          {
            type: "month",
            label: "月",
            span: 24,
            display: true,
            format: "MM",
            valueFormat: "MM",
            prop: "1638787656735_81715",
          },
          {
            type: "week",
            label: "周",
            span: 24,
            display: true,
            format: "yyyy 第 WW 周",
            prop: "1638787657195_39957",
          },
          {
            type: "date",
            label: "日期",
            span: 24,
            display: true,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            prop: "1638787657534_23092",
          },
          {
            type: "time",
            label: "时间",
            span: 24,
            display: true,
            format: "HH:mm:ss",
            valueFormat: "HH:mm:ss",
            prop: "1638787657895_21438",
          },
        ],
        labelPosition: "right",
        labelSuffix: "：",
        labelWidth: 140,
        gutter: 0,
        menuBtn: false,
        detail: false,
        submitBtn: false,
        submitText: "提交",
        emptyBtn: false,
        emptyText: "清空",
        menuPosition: "center",
      },
    };
  },
  methods: {
    init() {
      this.form = {};
      this.dialogVisible = true;
      this.formkey++;

      if (["add"].includes(this.ntype)) {
        this.title = "新增";
        this.option.detail = false;
      } else if (["edit"].includes(this.ntype)) {
        this.get_detail();
        this.title = "编辑";
        this.option.detail = false;
      } else if (["view"].includes(this.ntype)) {
        this.get_detail();
        this.title = "查看";
        this.option.detail = true;
      }
    },
    get_detail() {
      getNotice(this.obj_detail.id).then((res) => {
        const data = res.data;
        this.form = data;
      });
    },
    submitBtnSave() {
      this.btnLoading = true;
      this.$refs.formref.submit();
    },
    handleSubmitError() {
      this.btnLoading = false;
    },
    handleSubmit(form, done) {
      done();
      if (this.ntype == "edit") {
        this.saveSet(update, form);
      } else {
        this.saveSet(add, form);
      }
    },
    saveSet(Interface, params) {
      Interface(params).then(
        (res) => {
          this.$emit("callback_fun_add");
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.dialogVisible = false;
          this.btnLoading = false;
        },
        (error) => {
          this.btnLoading = false;
          window.console.log(error);
        }
      );
    },
  },
};
</script>
